<template>
  <div class="card">
    <header class="card-header">
      <h2>「废」网页内容加载器</h2>
    </header>
    <main class="card-body">
      <div v-if="loading" class="loading">加载中...</div>
      <div v-if="error" class="error">加载失败: {{ error.message }}</div>
      <div v-if="content" v-html="content" class="content"></div>
    </main>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      loading: true,
      error: null,
      content: null,
    };
  },
  async created() {
    try {
      const response = await axios.get('https://search.chongbuluo.com/', { responseType: 'text' });
      this.content = response.data;
    } catch (error) {
      this.error = error;
    } finally {
      this.loading = false;
    }
  },
};
</script>

<style scoped>
/* 与 UUIDGenerator.vue 中的样式相同 */

.loading {
  text-align: center;
  padding: 20px;
}

.error {
  text-align: center;
  color: red;
  padding: 20px;
}

.content {
  white-space: pre-wrap;
}
</style>